<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
    <!-- 上传图片css -->
    <!--    <link rel="stylesheet" href="../lib/upload/upload.css" media="all">-->
    <style>
        body {
            background-color: #ffffff;
        }

        .layui-input-block {
            width: 840px;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
<div class="layui-form layuimini-form">


    <input type="hidden" name="id" value="${pi.id}">

    <input type="hidden" value="${pi.areaType}" id="tt"/>
    <input type="hidden" value="${pi.piNum}" id="pp"/>

    <div class="layui-form-item">
        <label class="layui-form-label required">树莓派编号</label>
        <div class="layui-input-block">
            <select name="piNum" id="piNum" lay-verify="required" lay-reqtext="树莓派编号不能为空" lay-filter="">
            </select>
        </div>
    </div>






    <div class="layui-form-item">
        <label class="layui-form-label required">显示方式</label>
        <div class="layui-input-block">
            <select name="displayType" lay-verify="required" lay-reqtext="显示方式不能为空">
                <option value="">请选择</option>
                <option value="0" <#if pi.displayType=='0'>selected</#if>>瞬显</option>
                <option value="1" <#if pi.displayType=='1'>selected</#if>>滑动</option>
            </select>
        </div>
    </div>



    <div class="layui-form-item">
        <label class="layui-form-label">文字内容</label>
        <div class="layui-input-block">
            <input type="text" name="wordContent" placeholder="请输入文字" autocomplete="off"
                   class="layui-input" value="${pi.wordContent}">
        </div>
    </div>

<!--    <div class="layui-form-item">-->
<!--        <label class="layui-form-label required">上传图片</label>-->
<!--        <div class="layui-upload layui-inline">-->
<!--            <div class="layui-upload-list uploader-list">-->
<!--                <div id="" class="file-iteme">-->
<!--                    <div class="handle" id="handle1"><i class="layui-icon layui-icon-delete"></i></div>-->
<!--                    <img class="layui-upload-img" src="${pi.picUrl}" onerror="this.src='../images/img.png'" id="demo1"-->
<!--                         style="width:150px;height:100px">-->
<!--                </div>-->
<!--            </div>-->
<!--            <button type="button" class="layui-btn" id="test1" style="width:119px;">上传图片</button>-->
<!--            <input type="hidden" id="demoText1" value="${pi.picUrl}" name="picUrl"/>-->
<!--        </div>-->
<!--    </div>-->


    <div class="layui-form-item">
        <label class="layui-form-label">上传图片</label>
        <div class="case" style="padding-left:150px;">
            <!-- 上传图片属性参数 -->
            <!-- data-height：图片上传压缩最大高度，0则根据宽度等比例压缩，默认0 -->
            <!-- data-width：图片上传压缩最大宽度，0则根据高度等比例压缩，默认0 -->
            <!-- data-type：允许上传文件的扩展名，多个扩展名用逗号分割，支持非图片格式的文件上传，默认png,jpg,jpeg,gif -->
            <!-- data-file：上传提交服务器的表单名，默认file -->
            <!-- data-name：最终表单提交图片路径的表单名，默认upload -->
            <!-- action：服务器接收上传文件的地址，服务器需返回{"code":1,"msg":"/upload/1.jpg"}的JSON字符串，code为上传状态，1为成功，0为失败，msg为成功的文件路径或失败原因提示！ -->
            <!-- data-num：最多可以上传多少个文件，如为1，上传插件为单个文件上传样式，默认10  -->
            <!-- data-size：文件上传单个文件最大容量，图片不传不受该属性限制，默认20480  -->
            <!-- data-value：已经上传成功的文件名，多个文件用英文逗号分割，默认null  -->
            <div class="upload" style="width:200px;" action='../commonFile/uploadFile' data-value="${pi.picUrl?default('')}" data-num=3 data-file='file'
                 data-name='picUrl' id='case'></div>
        </div>
    </div>


    <div class="layui-form-item">
        <label class="layui-form-label">视频</label>
        <div class="layui-upload layui-inline">
            <input type="hidden" name="videoUrl" value="${pi.videoUrl?default('')}" id="resultVideo">
            <div style="padding:10px 0px;display:none;" id="noneVideo">暂无视频</div>
            <button type="button" class="layui-btn" id="test4">上传视频</button>
            <div style="color: red;font-size: 12px;margin-top: 5px">仅支持mp4格式,大小不超过500M</div>
            <input type="file" id="demoText4" style="display:none;"/>
            <div class="layui-upload-list" style="width: 352px;height: 200px;border: solid;border-color: #cccccc87;"
                 id="test8">

            </div>
        </div>
    </div>




    <div class="layui-form-item">
        <label class="layui-form-label required">模板名称</label>
        <div class="layui-input-block">
            <input type="text" name="mouldName" lay-verify="required" lay-reqtext="模板名称不能为空" placeholder="请输入模板名称"
                   autocomplete="off"
                   class="layui-input" value="${pi.mouldName}">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label required">区域分类</label>
        <div class="layui-input-block">
            <select name="areaType" id="areaType" lay-verify="required" lay-reqtext="区域分类不能为空" lay-filter="">
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label required">展示类型</label>
        <div class="layui-input-block">
            <select name="displayStatu" lay-verify="required" lay-reqtext="展示类型不能为空">
                <option value="">请选择</option>
                <option value="0" <#if pi.displayStatu=='0'>selected</#if>>图片</option>
                <option value="1" <#if pi.displayStatu=='1'>selected</#if>>视频</option>
            </select>
        </div>
    </div>



    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
            <button class="layui-btn layui-btn-normal" id="cancel">取消</button>
        </div>
    </div>

</div>
<!-- 上传图片jquery -->
<script src="../lib/upload/jquery.min.js" charset="utf-8"></script>
<script src="../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script src="../js/public-config2.js" charset="utf-8"></script>
<!-- 上传图片js -->
<script src="../lib/upload/jquery.upload.min.js" charset="utf-8"></script>
<script>


    $(function () {
        //初始化
        $.ajax({
            type: "POST", //提交方式
            url: "../pi_area/listNoPage",//路径
            contentType: "application/json;charset=utf-8",
            //data: JSON.stringify({"remark1": "4"}),//数据，这里使用的是Json格式进行传输
            dataType: "json",
            success: function (result) {//返回数据根据结果进行相应的处理
                if (result.code == "0" && result.data) {
                    $("#areaType").html("")
                    var html = '<option value="">请选择</option>';
                    $.each(result.data, function (index, item) {
                        if ($('#tt').val() == item.id) {
                            html += '<option value="' + item.id + '" selected>' + item.areaName + '</option>';
                        } else {
                        html += '<option value="' + item.id + '">' + item.areaName + '</option>';
                         }
                    })
                    $("#areaType").html(html)
                } else {
                    layer.msg(result.msg);
                }
            }
        });


        //初始化
        $.ajax({
            type: "POST", //提交方式
            url: "../raspi/listNoPage",//路径
            contentType: "application/json;charset=utf-8",
            //data: JSON.stringify({"remark1": "4"}),//数据，这里使用的是Json格式进行传输
            dataType: "json",
            success: function (result) {//返回数据根据结果进行相应的处理
                if (result.code == "0" && result.data) {
                    $("#piNum").html("")
                    var html = '<option value="">请选择</option>';
                    $.each(result.data, function (index, item) {
                        if ($('#pp').val() == item.id) {
                            html += '<option value="' + item.piNum + '" selected>' + item.piNum + '</option>';
                        } else {
                            html += '<option value="' + item.piNum + '">' + item.piNum + '</option>';
                        }
                    })
                    $("#piNum").html(html)
                } else {
                    layer.msg(result.msg);
                }
            }
        });



        var resultVideo = $("#resultVideo").val();
        if (resultVideo != "") {
            let url = resultVideo;
            var div = '<video id="mp4s" style="height: 100%;width: 100%"  controls="controls" autobuffer="autobuffer" preload="preload" loop="loop">' +
                '<source  src=' + url + ' type="video/mp4" style="height: 100%;width: 100%"/>' +
                '</video>';
            $("#test8").append(div);
        }else{
            $("#test8").css("display","none");
            $("#noneVideo").css("display","");
        }


    })

    $('#test4').on("click", function () {
        $("#demoText4").trigger("click");
    });



    layui.use(['form', 'layedit', 'upload', 'tableSelect'], function () {
        var form = layui.form
            , layer = layui.layer
            , upload = layui.upload
            , $ = layui.$;

        //初始化表单，要加上，不然刷新部分组件可能会不加载
        form.render();
        var iframeIndex = parent.layer.getFrameIndex(window.name);

        //上传图片关键方法
        $("#case").upload();

        //监听提交
        form.on('submit(demo1)', function (data) {
            console.log(data)
            if (data.field.picUrl == '') {
                layer.msg('图片不能为空')
                return false;
            }
            $.ajax({
                type: "POST", //提交方式
                url: "../pi/update",//路径
                contentType: "application/json;charset=utf-8",
                data: JSON.stringify(data.field),//数据，这里使用的是Json格式进行传输
                dataType: "json",
                success: function (result) {//返回数据根据结果进行相应的处理
                    if (result.code == "200") {
                        var index = layer.msg("成功", {
                            time: 800 //如果不配置，默认是3秒）
                        }, function () {
                            // 关闭弹出层
                            layer.close(index);
                            parent.layer.close(iframeIndex);
                        })
                    } else {
                        layer.msg(result.msg);
                    }
                }
            });
            return false;
        });


        //退出
        $('#cancel').on("click", function () {
            parent.layer.close(iframeIndex);
        });

        var a = 0;
        var loading;
        $("#demoText4").change(function (event) {
            var param = $('#demoText4').get(0).value.toString();
            if (param != "") {
                loading = layer.msg('正在上传,请稍后', {icon: 16, shade: 0.3, time: 0});
            }
            setTimeout(function () {
                a = 0;
                var params = param.split("\.");
                var name = params[0].split("\\");
                var params1 = params[params.length-1];
                if (param != "") {
                    if (params1 == "mp4" || params1 == "MP4" || params1 == "mP4" || params1 == "Mp4") {

                    } else {
                        $('#demoText4').val("");
                        layer.msg('请选择mp4文件');
                        return;
                    }
                } else {
                    $('#demoText4').val("");
                    layer.msg('请选择mp4文件');
                    return;
                }
                if (param.indexOf(" ") != -1) {
                    $('#demoText4').val("");
                    layer.msg('文件名不能有空格');
                    return;
                }
                var file = $('#demoText4').get(0).files[0];
                var size = file.size
                if (size > 500 * 1024 * 1024) {
                    $('#demoText4').val("");
                    layer.msg('视频大小不能大于500M');
                    return;
                }
                var shardSize = 2 * 1024 * 1024;                //以2MB为一个分片,每个分片的大小
                var shardCount = Math.ceil(size / shardSize);
                for (let i = 0; i < shardCount; i++) {
                    PostFile(file, i);
                }
                if (a === shardCount) {
                    var form1 = new FormData();
                    form1.append("md5", "md5");
                    form1.append("name", file.name);
                    form1.append("system", "im");
                    form1.append("type", "mp4");
                    $.ajax({
                        url: uploadpath + "/hnyfkj-file-server/common/merger",
                        type: "POST",
                        data: form1,
                        async: false, //异步
                        dataType: "json",
                        processData: false, //很重要，告诉jquery不要对form进行处理
                        contentType: false, //很重要，指定为false才能形成正确的Content-Type
                        success: function (res) {
                            if (res.code == 200) {
                                layer.msg("上传成功");
                                $("#test8").html("");
                                $("#test8").css("display","");
                                $("#noneVideo").css("display","none");
                                $("#resultVideo").val(uploadpath + "/" + res.result);
                                var url = uploadpath + "/" + res.result;
                                var div = '<video id="mp4s" style="height: 100%;width: 100%"  controls="controls" autobuffer="autobuffer" preload="preload" loop="loop">' +
                                    '<source  src=' + url + ' type="video/mp4" style="height: 100%;width: 100%"/>' +
                                    '</video>';
                                $("#test8").html("")
                                $("#test8").append(div);
                                layer.close(loading);
                                $('#demoText4').val("");
                            }
                        }
                    })
                }
            }, 500);
        });

        //执行分片上传
        function PostFile(file, i) {
            var name = file.name,                           //文件名
                size = file.size,                           //总大小shardSize = 2 * 1024 * 1024,
                shardSize = 2 * 1024 * 1024,                //以2MB为一个分片,每个分片的大小
                shardCount = Math.ceil(size / shardSize);   //总片数
            if (i >= shardCount) {
                return;
            }
            var start = i * shardSize;
            var end = start + shardSize;
            var packet = file.slice(start, end);  //将文件进行切片
            /*  构建form表单进行提交  */
            var form = new FormData();
            form.append("file", packet); //slice方法用于切出文件的一部分
            form.append("name", name);
            form.append("size", size);
            if (shardCount === i + 1) {
                shardSize = size - i * shardSize
            }
            form.append("shardSize", shardSize);
            form.append("system", "im");
            form.append("type", "mp4");
            form.append("md5", "md5");
            form.append("chunks", shardCount); //总片数
            form.append("chunk", i + 1); //当前是第几片
            $.ajax({
                url: uploadpath + "/hnyfkj-file-server/common/upload",
                type: "POST",
                data: form,
                //timeout:"10000",  //超时10秒
                async: false, //异步
                dataType: "json",
                processData: false, //很重要，告诉jquery不要对form进行处理
                contentType: false, //很重要，指定为false才能形成正确的Content-Type
                success: function (msg) {
                    console.log(msg);
                    /*  表示上一块文件上传成功，继续下一次  */
                    if (msg.code === 200) {
                        console.log("上传成功");
                        a++
                    }
                }
            })
        };


        //图片上传上传
        var uploadInst = upload.render({
            elem: '#test1'
            , accept: 'images' //普通文件
            , url: uploadpath + 'hnyfkj-file-server/common/upload' //改成您自己的上传接口
            , before: function (obj) {
                loading = layer.msg('正在上传,请稍后', {icon: 16, shade: 0.3, time: 0});
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#demo1').attr('src', result); //图片链接（base64）
                });
            }
            , choose: function (obj) {
                var param = $('input[name="file"]')[0].value.toString();
                var params = param.split("\.");
                var name = params[0].split("\\");
                var iname = name[name.length - 1].replace(/,/, "");
                this.data = {
                    name: name[name.length - 1].replace(/,/, ""),
                    type: "." + params[params.length - 1],
                    system: "im"
                }
                console.log(this.data);
            }
            , data: {}
            , done: function (res) {
                layer.close(loading);
                //如果上传失败
                $("#demoText1").val(uploadpath + "/" + res.result);
                if (res.code != 200) {
                    return layer.msg('上传失败');
                }
                //上传成功
            }
            , error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#demoText1');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
        });


        // 删除图片
        $(document).on("click", "#handle1", function (event) {
            $('#demo1').attr('src', "");
            $('#demoText1').val("");
        });

    });
</script>
</body>
</html>